<template>
  <div class="app-container">
    <!-- ECharts 图表示例 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <scm-bar title="进库统计（年）" :xAxisData="yearsIn" :seriesData="dataOfYearsIn" height="400px"/>
        </el-card >
      </el-col>
      <el-col :span="12">
        <el-card>
          <scm-bar title="出库统计（年）" :xAxisData="monthsIn" :seriesData="dataOfMonthsIn" height="400px"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <scm-bar title="进库统计（月）" :xAxisData="yearsOut" :seriesData="dataOfYearsOut" height="400px"/>
        </el-card >
      </el-col>
      <el-col :span="12">
        <el-card>
          <scm-bar title="出库统计（月）" :xAxisData="monthsOut" :seriesData="dataOfMonthsOut" height="400px"/>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup >
import ScmBar from "@/views/scm/dashboard/scmBar.vue";

import { listScmStatsYearly } from "@/api/scm/scmStatsYearly";
import {listScmStatsMonthly} from "@/api/scm/scmStatsMonthly.js";

const { proxy } = getCurrentInstance();

const scmStatsYearlyList = ref([]);
const scmStatsMonthlyList = ref([]);
const loading = ref(true);
let yearsIn = ref([]);
let dataOfYearsIn = ref([]);
let monthsIn = ref([]);
let dataOfMonthsIn = ref([]);
let yearsOut = ref([]);
let dataOfYearsOut = ref([]);
let monthsOut = ref([]);
let dataOfMonthsOut = ref([]);

const now = new Date();
const data = reactive({
  queryParamsForYearly: {
    pageNum: 1,
    pageSize: 11,
    year: now.getFullYear() - 10,
    quarter: 0
  },
  queryParamsForMonthly: {
    pageNum: 1,
    pageSize: 24,
    year: now.getFullYear() - 1,
    month: null
  }

});

const { queryParamsForYearly, queryParamsForMonthly } = toRefs(data);

/** 查询年度统计信息-总列表 */
function getList() {
  // loading.value = true;new Date().getFullYear()
  // queryParams.value.year = new Date().getFullYear();
  listScmStatsYearly(queryParamsForYearly.value).then(response => {
    scmStatsYearlyList.value = response.rows;
    yearsIn.value = scmStatsYearlyList.value.map(item => item.year);
    dataOfYearsIn.value = scmStatsYearlyList.value.map(item => item.totalStockIn);
    yearsOut.value = scmStatsYearlyList.value.map(item => item.year);
    dataOfYearsOut.value = scmStatsYearlyList.value.map(item => item.totalStockOut);
  });
  listScmStatsMonthly(queryParamsForMonthly.value).then(response => {
    scmStatsMonthlyList.value = response.rows;
    const total = response.total;
    const removeNumber = total - 13;
    monthsIn.value = scmStatsMonthlyList.value.map(item => item.month);
    dataOfMonthsIn.value = scmStatsMonthlyList.value.map(item => item.totalStockIn);
    monthsIn.value.splice(0, removeNumber);
    dataOfMonthsIn.value.splice(0, removeNumber);
    monthsOut.value = scmStatsMonthlyList.value.map(item => item.month);
    dataOfMonthsOut.value = scmStatsMonthlyList.value.map(item => item.totalStockOut);
    monthsOut.value.splice(0, removeNumber);
    dataOfMonthsOut.value.splice(0, removeNumber);
  });

}

getList();


</script>

<style scoped>

</style>